<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:q="http://huliqing.name/qfaces"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/example/_template.xhtml">
	<ui:define name="title">linkage</ui:define>
	<ui:define name="header">linkage组件示例</ui:define>
	<ui:define name="content">
		<q:saveState value="#{linkageBean.size}" />
		<h:form id="myForm">
			<!-- 国家,省份,城市,城区,街道 -->
			<h:selectOneListbox id="country" 
				value="#{linkageBean.country}" 
				size="#{linkageBean.size}">
				<f:selectItem itemValue="" itemLabel="" />
				<f:selectItem itemValue="China" itemLabel="中国" />
			</h:selectOneListbox>
			
			<h:selectOneListbox id="province" 
				value="#{linkageBean.province}" 
				size="#{linkageBean.size}"/>
				
			<h:selectOneListbox id="city" 
				value="#{linkageBean.city}" 
				size="#{linkageBean.size}"/>
				
			<h:selectOneListbox id="area" 
				value="#{linkageBean.area}" 
				size="#{linkageBean.size}"/>
				
			<h:selectOneListbox id="street" 
				value="#{linkageBean.street}" 
				size="#{linkageBean.size}"/>

			<q:linkage for="country, province, city, area, street" 
				listener="#{linkageBean.listener}" />
			<p />
			<h:commandButton value="提交" />
			<h:commandButton value="查看方式" action="#{linkageBean.changeSize}"/>
			<p />
			<h:outputText value="你的选择:
				(#{linkageBean.country}) -
				(#{linkageBean.province}) -
				(#{linkageBean.city}) -
				(#{linkageBean.area}) -
				(#{linkageBean.street})"/>
		</h:form>
	</ui:define>
	<ui:define name="description" >
		<h:outputText value="这是一个Ajax方式的多级联动组件，支持无限级别。使用非常简单。" />
	</ui:define>
	<ui:define name="htmlCode" >
		<h:outputText value="#{linkageBean.htmlCode}"/>
	</ui:define>
	<ui:define name="javaCode" >
		<h:outputText value="#{linkageBean.javaCode}"/>
	</ui:define>
</ui:composition>